<template>
	<div class="reward_body">
		<div>
			<div class="exchange_success">
				<div class="okImg"><img src="../../images/ok.gif"></div>
				<span>厉害啦，打赏成功啦</span>
				<p>同时还收到一张打赏券</p>

			</div>
			<div class="exchange_card">
				<div class="back_card">
					<span class="left">卡券详情</span>
					<a href="#cardList" class="right">查看我的商券<em class="iconfont icon-right right"></em></a>
				</div>
				<div class="card_box">
					<div class="card_list">
						<div v-for="couponParam in couponList" class="cardBg1 card_item" @click="goCouponDetl(couponParam)">
			                <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
			                <div class="cardBg2">
			                    <div class="card_tit">
			                        有效期至：{{couponParam.validatyEnd | endTime2}}
			                        <div class="clear"></div>
			                    </div>
								<!-- <card-img :item="couponParam"></card-img> -->
													<div class="couponDiv">
														<coupon-denomination :item="couponParam"></coupon-denomination>
													</div>
			                    <div class="card_info">
			                        <div class="card_name">{{couponParam.name}}</div>
			                        <div class="coupon_info_item">
										<star :couponComScore="couponParam.comScore"></star>
										<p class="info_pad">{{couponParam.comNum}}条</p>
			                        </div>
			                        <div class="coupon_info_item color_gray">
			                            已售出   {{couponParam.soldnum}}   &nbsp;&nbsp;&nbsp;已使用   {{couponParam.usednum}}
			                        </div>
			                    </div>
			                </div>
							<a class="card_btn">
							  <span class="left">使用须知</span>
							  <em class="iconfont icon-right right"></em>
							</a>
			            </div>

					</div>
				</div>


            </div>
		</div>
	</div>
</template>
<script>
	import star from '../../componentes/global/star.vue'
	import * as types from '../../vuex/types.js'
  import getData from '../../service/getData.js'
	import { mapState } from 'vuex'
	import {Storage} from 'src/utils/storage.js'
	export default{
	    data(){
	        return{
                couponList:{}
			}
		},
		components: {
            // cardImg,
            star
		},
		computed: {
		    ...mapState({
		      userInfo: state => state.user.userInfo,
		    })
		  },
		methods:{
            goCouponDetl(params){
            	var me=this;
                Storage.set("couponInfo",params);
                // this.$router.push({name:'couponDetail',query:{type:'noExchange'}});
                this.$router.push({
		          name:'couDetail',
		          query: {
		            type:'noExchange',
		            couponId: params.couponId,
		            mchtId: params.mchtId,
		            seq: params.seqNo||'',
		            usrId: '',
		            usrPicId: ''
		          }
		        });

            },
		},
		beforeRouteLeave(to, from, next){
            next();
        },
        created:function(){
					this.$emit('header-info', {
			      title: '打赏完成',
			      isBack: true
			    })
            let me =this;

            me.couponList=Storage.get("reward_info",true);
            console.info(me.couponList)
            // console.info(this.$route.query.couponInfo)
            //电子券详情
            // getData.getCouponInfo({"method":'post',data:{"couponId":me.param.couponId,"mchtId":me.param.mchtId,"seqNo":me.param.seqNo,"usrId":me.param.usrId, "usrPicId":me.param.usrPicId}}).then(rep => {
            //     me.couponParam = rep.content;
            // });
        }
	}
</script>
<style scoped>
	.reward_body{
		height: 100%;
		background-color: #fff;
	}
	.reward_body .exchange_success {
	  padding: 2rem 0;
	}
	.reward_body .exchange_success span{font-size: 1rem}
	.reward_body .exchange_success p{font-size: 1rem}
	.exchange_card{overflow: hidden;}
	.card_box{
		/*width: 28rem;*/
		height: 12.5rem;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.card_list{
		width: 1000%;
	}
	.card_item{
		float: left;
		width: calc(10% - 0.667rem);
		margin-right: 0.667rem;
	}
	.okImg{margin: 2rem auto 0}
	.exchange_card .bgLine{top:8.2rem;}
</style>
